<template>
  <el-menu mode="horizontal" :ellipsis="false" default-active="1">
    <el-menu-item index="0"><h1>CMA资质认定统一管理系统</h1></el-menu-item>
    <div class="flex-grow" />
    <el-menu-item index="1">
      <router-link to="/">Home</router-link>
    </el-menu-item>
    <el-menu-item index="3">
      <router-link to="/projectFile">提交文件</router-link>
    </el-menu-item>
    <el-menu-item index="4">
      <router-link to="/projectDetails">项目详情</router-link>
    </el-menu-item>
    <div
    style="display: flex;"
    v-if="isLab"
    >
      <el-menu-item index="2">
        <router-link to="/projectTable">项目表</router-link>
      </el-menu-item>
    </div>
    <div
      style="display: flex;"
      v-if="isOffice"
    >
      <el-menu-item index="5">
        <router-link to="/projectMenu">项目菜单</router-link>
      </el-menu-item>
    </div>
    <el-menu-item index="6">
      <router-link to="/PersonalInformation">测试</router-link>
    </el-menu-item>
    <div
      style="display: flex;"
      v-if="!login"
    >
      <el-menu-item index="7">
        <router-link to="/login">登录</router-link>
      </el-menu-item>
      <el-menu-item index="8">
        <router-link to="/register">注册</router-link>
      </el-menu-item>
    </div>
    <div
      style="display: flex;"
      v-if="login"
    >
      <el-menu-item index="9" v-if="login">
        <el-button @click="logout">登出</el-button>
      </el-menu-item>
    </div>
  </el-menu>

  <el-container>
    <el-main>
      <router-view />
    </el-main>
  </el-container>
</template>

<script lang="js" setup>
import axios from 'axios';
import { ref, onMounted } from 'vue'
import {useCookies} from "vue3-cookies";
import { h } from 'vue'
import { ElMessage } from 'element-plus'
import router from '@/router';
const {cookies} = useCookies();
const login = ref(false);
const isLab = ref(false)
const isOffice = ref(false)
// location.reload();


onMounted(() => {
  // location.reload();
  if (cookies.get("satoken")){
    login.value = true;
  }
  if (cookies.get("userRole") === "lab"){
    isLab.value = true;
  }
  if (cookies.get("userRole") === "office"){
    isOffice.value = true;
  }
  console.log(isOffice)
});

const logout = () => {
  axios.post(
    "http://localhost:8080/api/auth/logout",
    {
      headers: {
        satoken: cookies.get("satoken")
      }
    }
  ).then(
    (response) => {
      if(response.data.code != 200) {
        ElMessage({
          message: h(
            "span", null, "登出"
          )
        })
      }
      cookies.remove("satoken")
      cookies.remove("username")
      cookies.remove("userRole")
      
      router.push({path:"/"}).then(() => {router.go()});
    }
  ).catch(
    (err) => {
      console.log(err)
      ElMessage({
        message: h(
          "span", null, "登出"
        )
      })
      cookies.remove("satoken")
      cookies.remove("username")
      cookies.remove("userRole")
      router.push({path:"/"}).then(() => {router.go()});
    }
  )
  
}
</script>


<style>
html, body, #app {
  height: 100%;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.flex-grow {
  flex-grow: 1;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}


</style>
